<template>
  <view>
    <!-- 搜索条 -->

    <view class="b-search">
      <input
        type="text"
        placeholder="搜索"
        maxlength="10"
        placeholder-style="font-size:14px;color:#bbb"
        v-model="ipt"
        @confirm="searchNow($event)"
				focus
      />
      <view
        class="btn"
        @tap="searchNow($event)"
      >
        搜索
      </view>
      <uniIcons
        type="search"
        size="22"
        color="#bbb"
        class="icon"
      ></uniIcons>
    </view>

    <view class="b-goods">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        @scrolltolower="scrollBottom"
        lower-threshold=10
        :style="{'height':screenHeight-120+'px'}"
      >
        <view
          class="b-goods__item"
          v-for="(item,index) in goodsList"
          :key="index"
        >
          <view class="b-goods__item-left">
            <image :src="'https://expay-mall.s3-sa-east-1.amazonaws.com' + item.coverPic"></image>
          </view>
          <view
            class="b-goods__item-right"
            @tap="handleUrl(item.goodsId,item.state)"
          >
            <view class="b-goods__title">{{item.title}}</view>
            <view class="b-goods__bottom">
              <view class="group">
                <text class="t1">ARS$</text>
                <text class=t2>{{item.price}}</text>
              </view>
              <text class="text2">{{item.praise}}点赞</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- <view class="searchTopBox">
      <view class="searchBoxRadius">
        <view class="grace-search-icon searchBoxIcon"></view>
        <input
          class="searchBoxIpt"
          type="search"
          v-model="ipt"
          @confirm="searchNow($event)"
          placeholder="关键字"
        >
      </view>
    </view> -->
    <!-- 搜索历史 -->
    <!-- <view class="searchBotBox">
      <view class="ov">
        <view class="fl">搜索历史</view>
        <view
          @tap="clearKey"
          class="fr grace-more-r grace-search-remove"
        ></view>
      </view>
      <view class="searchHistoryBox">
        <view
          class="searchHistoryBoxItem"
          v-for="(item,index) in searchKey"
          :key='index'
        >
          {{item}}
        </view>
      </view>
    </view> -->
  </view>
</template>
<script>
import uniIcons from "@/components/uni-icons/uni-icons"
export default {
  components: { uniIcons },
  data() {
    return {
      searchKey: [],
      ipt: '',
      searchClose: true,
      goodsList: [],
      screenHeight: uni.getSystemInfoSync().screenHeight,
    }
  },
  onShow() {
    var vv = uni.getStorageSync('searchLocal');
    var arr = vv.split("-");
    this.searchKey = arr;
  },
  methods: {
    clearKey: function () {
      var that = this;
      uni.showModal({
        title: '提示',
        content: '点击确定将删除所有历史信息，确定删除吗？',
        success: function (res) {
          if (res.confirm) {
            that.searchKey = [];
            uni.setStorage({
              key: 'searchLocal',
              data: that.searchKey
            });

          } else if (res.cancel) {

          }
        }
      });
    },
    searchNow: function (e) {
      if (this.ipt == '') {
        uni.showToast({
          title: '未输入搜索关键字',
          icon: 'none',
          duration: 1000
        });
        return false;
      }
      // var that = this;    //本地保存搜索激励 
      // var newArr = that.searchKey;
      // newArr.push(this.ipt);
      // console.log(newArr)
      // var newStr = newArr.join('-');
      // uni.setStorage({
      //   key: 'searchLocal',
      //   data: newStr
      // });

      this.$ld()
      this.$http.POST({
        url: '/seller/goods/page',
        data: {
          pageNo: 0,
          pageSize: 10,
          title: this.ipt
        }
      }).then(res => {
        uni.hideLoading();
        this.goodsList = res.data.list
      })
    },
    handleUrl(id, state) {
      uni.navigateTo({
        url: `/pages/GoodsManage/goodsDetail?goodsId=${id}&state=${state}`
      });
    },
  }
}
</script>


<style lang="scss" scoped>
@import '@/scss';
page {
  background: #fff;
}
@include b(search) {
  position: relative;
  background: #fff;
  display: flex;
  justify-content: center;
  input {
    border: 1px solid #eee;
    @include size(470upx, 52upx);
    border-radius: 56upx;
    background: #f9f9f9;
    padding-left: 80upx;
  }
  .btn {
    background: #2293ec;
    color: #fff;
    @include size(100upx, 52upx);
    @include flex-center;
    border-radius: 18upx;
    margin-left: 16upx;
  }
  .icon {
    position: absolute;
    left: 72upx;
    top: 50%;
    transform: translateY(-50%);
  }
}
@include b(goods) {
  background: #fff;
  padding: 30upx;
  .scroll-Y {
    height: 960upx;
  }
  @include e(item) {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20upx 0;
    position: relative;
    padding-left: 20upx;
    &-left {
      image {
        @include size(160upx, 160upx);
      }
    }
    &-right {
      margin-left: 50upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding-right: 30upx;
    }
  }
  @include e(title) {
    padding-top: 10upx;
  }
  @include e(bottom) {
    padding-bottom: 10upx;
    @include flex-bw;
    .group {
      color: red;
      .t2 {
        font-size: 36upx;
        padding-left: 6upx;
      }
    }
    .text2 {
      color: #999;
      font-size: 24upx;
    }
  }
}
.ov {
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.searchTopBox {
  width: 100%;
  background-color: #0b877f;
  height: 100upx;
  box-sizing: border-box;
  padding-top: 15upx;
}

.searchBoxRadius {
  width: 90%;
  height: 70upx;
  background-color: #fff;
  margin-left: 5%;
  overflow: hidden;
  border-radius: 35upx;
}

.searchBoxIcon {
  font-size: 40upx;
  margin-top: 20upx;
  margin-left: 20upx;
  float: left;
}

.searchBoxIpt {
  height: 70upx;
  line-height: 70upx;
  margin-left: 20upx;
  float: left;
}

.searchBotBox {
  width: 100%;
  margin-top: 30upx;
  padding: 15upx 3%;
  box-sizing: border-box;
}

.searchHistoryBox {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 40upx;
}

.searchHistoryBoxItem {
  float: left;
  font-size: 26upx;
  color: #666;
  line-height: 46upx;
  height: 46upx;
  padding: 0 20upx;
  border-radius: 23upx;
  margin-left: 15upx;
  margin-bottom: 20upx;
  border: 1px solid #ccc;
}
</style>
